export default {
  data() {
    return {
      rolesList: [
        {
          roleName: '主管',
          roleDesc: '技术负责人'
        }
      ],
      // 控制对话框
      rolesAssignVisible: false,

      // 树状结构数据
      data2: [
        {
          id: 1,
          label: '一级 1',
          children: [
            {
              id: 4,
              label: '二级 1-1',
              children: [
                {
                  id: 9,
                  label: '三级 1-1-1'
                },
                {
                  id: 10,
                  label: '三级 1-1-2'
                }
              ]
            }
          ]
        },
        {
          id: 2,
          label: '一级 2',
          children: [
            {
              id: 5,
              label: '二级 2-1'
            },
            {
              id: 6,
              label: '二级 2-2'
            }
          ]
        },
        {
          id: 3,
          label: '一级 3',
          children: [
            {
              id: 7,
              label: '二级 3-1'
            },
            {
              id: 8,
              label: '二级 3-2'
            }
          ]
        }
      ],
      defaultProps: {
        // children是显示结构的,对应上面数据中chidren的内容
        children: 'children',
        // label 显示内容,对应label内容
        label: 'authName'
      },

      // 角色id
      roleId: 0
    }
  },
  created() {
    this.loadRolesList()
    this.loadAssignRoles()
  },
  methods: {
    indexMethod(index) {
      return index
    },
    // 进入页面展示数据
    async loadRolesList() {
      let res = await this.$axios.get('roles')
      // console.log(res)
      this.rolesList = res.data.data
    },

    // 点击分配权限后，获取所有的权限列表，以树状图展示在页面中
    async loadAssignRoles() {
      let res = await this.$axios.get('rights/tree')
      // console.log(res.data.data)
      this.data2 = res.data.data
    },
    // 点击显示树状权限图
    showAssignTree(row) {
      // 点击时，拿到当前的roleid
      this.roleId = row.id

      this.rolesAssignVisible = true
      // 展示已有的权限
      // this.$refs.tree.setCheckedKeys([105])
      // 此处存在dom异步更新的情况,用this.$nextTick来解决

      let arr = []
      //  // 点击时拿到当前行角色的第三层的id即可 需要一层一层遍历
      row.children.forEach(item1 => {
        item1.children.forEach(item2 => {
          item2.children.forEach(item3 => {
            arr.push(item3.id)
          })
        })
      })

      this.$nextTick(res => {
        this.$refs.tree.setCheckedKeys(arr)
      })
    },

    // 确定之后分配权限
    async startAssignRights() {
      // 请求参数： roleId, 从上面获取
      //           rid：所有权限id,包括半选以及选中的
      let keys1 = this.$refs.tree.getCheckedKeys() //选中的
      let keys2 = this.$refs.tree.getHalfCheckedKeys() //半选中的
      let keys = [...keys1, ...keys2]
      // console.log(keys)

      let res = await this.$axios.post(`roles/${this.roleId}/rights`, {
        rids: keys.join(',')
      })
      // console.log(res)
      //更新成功之后，关闭对话框,刷新列表,并提示更新成功
      this.rolesAssignVisible = false
      this.loadRolesList()
      this.$message({
        message: '更新成功',
        type: 'success',
        duration: 800
      })
    }
  }
}
